<template>
  <!-- 安全 -->
  <div class="list">
    <ContentTitle :info="info">
    <template v-slot="scope">
      <p @click="dialogFormVisible = true" class="text mr-30 f18">
        {{ scope.info.aaa}}
      </p>
    </template>
  </ContentTitle>
    <!-- 列表 -->
    <el-table class="table mt-10" :data="tableNew" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80" />
      <el-table-column align="center" prop="tag" label="标签" />
      <el-table-column align="center" prop="id" label="密钥ID" />
      <el-table-column align="center" prop="authority" label="访问权限" />
      <el-table-column
        align="center"
        prop="online"
        label="密钥状态"
        :formatter="utils.fcOnline"
      />
      <el-table-column
        align="center"
        :formatter="utils.fcTime"
        prop="cTime"
        label="创建时间"
      />
      <el-table-column
        align="center"
        :formatter="utils.fuTime"
        prop="uTime"
        label="更新时间"
      />
      <el-table-column align="center" prop="address" label="操作" width="130">
        <!-- 删除和修改 -->
        <template #default="scope">
          <el-row>
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="edit(scope, index)"
            />
            <el-button
              type="danger"
              :icon="Delete"
              circle
              @click="del(scope, index)"
            />
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <!-- 增加 -->
    <el-dialog v-model="dialogFormVisible" title="新增密钥">
      <el-form :model="form">
        <el-form-item label="标签" label-width="140px">
          <el-input v-model="form.tag" autocomplete="off" />
        </el-form-item>
        <el-form-item label="访问权限" label-width="140px">
          <el-input v-model="form.authority" autocomplete="off" />
        </el-form-item>
      </el-form>
      <el-form-item label="密钥状态" label-width="140px">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="使用中" value="true" />
          <el-option label="未使用" value="false" />
        </el-select>
      </el-form-item>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="getAdd"> 确认 </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog v-model="show" title="修改密钥">
      <el-form :model="editForm">
        <el-form-item label="标签" label-width="140px">
          <el-input v-model="editForm.tag" autocomplete="off" />
        </el-form-item>
        <el-form-item label="访问权限" label-width="140px">
          <el-input v-model="editForm.authority" autocomplete="off" />
        </el-form-item>
      </el-form>
      <el-form-item label="密钥状态" label-width="140px">
        <el-select v-model="editForm.region" placeholder="请选择">
          <el-option label="使用中" value="true" />
          <el-option label="未使用" value="false" />
        </el-select>
      </el-form-item>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="editAdd"> 提交 </el-button>
          <el-button @click="show = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <div class="flex jc-c bg-fff">
      <el-pagination
        hide-on-single-page
        background
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import * as api from "../../api/index";
import { Delete, Edit } from "@element-plus/icons-vue"; //删除和修改
import { ElMessageBox } from "element-plus";
import { inject } from "vue";
import { reduce } from "lodash";
//组件
import ContentTitle from "../../components/ContentTitle.vue";
//组件
const info = ref({
  text: "API访问密钥",
  type: "安全",
  msg: "使用访问密钥向SenseCAP API服务发出安全的REST或HTTP请求",
  aaa: "新增",
});
const utils = inject("utils");
//分页
const tableNew = ref([]); //分页后渲染的数据
const pageSize = ref(5);
const total = ref(0); //总数
const changePage = (newPage) => {
  tableNew.value = tableData.value.slice(5 * (newPage - 1), 5 * newPage); 
};
//列表
const tableData = ref([]);
const getTableList = () => {
  api.$securityList().then((res) => {
    tableData.value = res.data;
    tableNew.value = tableData.value.slice(0, 5);
    total.value = res.total;
  });
};
//弹窗
const dialogFormVisible = ref(false); //是否弹出弹窗
const show = ref(false); //是否弹出修改弹窗
const form = reactive({
  tag: "", //标签
  authority: "", //访问权限
  region: "",
});
//点击确认增加
const getAdd = () => {
  let data = {
    authority: form.authority,
    tag: form.tag,
    online: form.region,
  };
  dialogFormVisible.value = false;
  api.$securityAdd(data).then((res) => {
    tableData.value.unshift(res.data);
    //清空
    form.tag = "";
    form.authority = "";
    form.region = "";
  });
};
//点击修改
const editForm = reactive({
  //修改的值
  id: "",
  tag: "", //标签
  authority: "", //访问权限
  region: "",
  online: "",
  index: "",
});
const edit = (item, index) => {
  show.value = true;
  editForm.tag = item.row.tag;
  editForm.authority = item.row.authority;
  editForm.region = item.row.online ? "使用中" : "未使用";
  editForm.id = item.row.id;
  editForm.online = item.row.online;
  editForm.index = index;
};
//确认修改
const editAdd = () => {
  let data = {
    id: editForm.id,
    authority: editForm.authority,
    tag: editForm.tag,
    online: editForm.online,
  };
  api.$securityEdit(data).then((res) => {
    show.value = false;
    tableData.value.splice(editForm.index, 1, editForm);
  });
};
//点击删除
const del = (item, index) => {
  //确定删除吗
  ElMessageBox.confirm("确定删除吗?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    let data = {
      id: item.row.id,
    };
    api.$securityDel(data).then((res) => {
      tableData.value.splice(index, 1);
      total.value--;
    });
  });
};

onMounted(getTableList);
</script>
<style lang="less">
@import "./list.less";
</style>